<template>
  <view class="container">
    <!-- 顶部导航 -->
    <lg-topbar bgColor="#fff" height="132rpx">
      <view class="bg-topbar-content">
        <view @click="Back">
          <uv-icon name="arrow-left" size="25"></uv-icon>
        </view>
        <view>
          {{ t("Tabs") }}
        </view>
        <view @click="reset">
          {{ t("Reset") }}
        </view>
      </view>
    </lg-topbar>
    <scroll-view v-if="loadEnd && tabList.length > 0" class="scroll" scroll-y="true" refresher-enabled="true"
      scroll-with-animation="true" :refresher-triggered="triggered" @refresherrefresh="onRefresh"
      @scrolltolower="onScrollBottom">
      <searchCard v-for="item in tabList" :key="item.name" :item="item" @click="selectTab(item)" :hiddenNext="true">
      </searchCard>
    </scroll-view>
    <view v-if="showEmpty" class="empty-container">
      <bgEmpty />
    </view>
  </view>
</template>
<script setup>
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import searchCard from "./components/search-card.vue"
import { CartAPI } from "@/api"
import { onLoad } from "@dcloudio/uni-app";
import bgEmpty from "@/components/BgEmpty"
import { useCategoryStore } from '@/store'

const categoryStore = useCategoryStore()
const { t } = useI18n()
const loadEnd = ref(true)
const triggered = ref(false)
const tabList = ref([])
const showEmpty = ref(false)
const onRefresh = () => {
  console.log("onRefresh")
}
const onScrollBottom = () => {
  console.log("onScrollBottom")
}
const Back = () => {
  uni.navigateBack()
}
const reset = () => {
  categoryStore.clearSelectedTab()
  Back()
}
const selectTab = (item) => {
  debugger
  // 使用 pinia store 存储数据
  categoryStore.setSelectedTab(item)
  // 返回上级页面
  uni.navigateBack()
}
onLoad((options) => {
  let { carMakeId } = options
  if (carMakeId) {
    getTabs(carMakeId)
  }
})
const getTabs = (id) => {
  CartAPI.getlabelList().then(res => {
    const thirdLevelChildren = res.data[0]?.children[0]?.children ?? [];
    if (thirdLevelChildren.length > 0) {
      tabList.value = thirdLevelChildren;
    } else {
      showEmpty.value = true
    }
  }).catch(err => {
    console.log(err)
  })
}
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  width: 100vw;
  height: 100vh;
}

.bg-topbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 20rpx;
}

.scroll {
  height: calc(100vh - 132rpx);
}
</style>
